import * as THREE from 'three'
import createApp from '../../core'

function createGridHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)

  const axesHelper = new THREE.AxesHelper(50)
  axesHelper.renderOrder = 10
  scene.add(axesHelper)

  let gridHelper = new THREE.GridHelper(data.size, data.divisions)
  gridHelper.renderOrder = 0
  scene.add(gridHelper)

  const geometry = new THREE.PlaneGeometry(50, 50)
  const material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, color: 0xff0000 })
  material.polygonOffset = true
  material.polygonOffsetFactor = 0.1
  material.polygonOffsetUnits = -20
  const mesh1 = new THREE.Mesh(geometry, material)
  mesh1.rotateX(Math.PI / 2)
  scene.add(mesh1)

  function refresh () {
    scene.remove(gridHelper)
    gridHelper = new THREE.GridHelper(data.size, data.divisions)
    scene.add(gridHelper)
  }

  const folder = gui.addFolder('相机观察的位置')
  folder.add(data, 'size', 0, 500).onChange(refresh)
  folder.add(data, 'divisions', 0, 20, 1).onChange(refresh)
}

const data = {
  size: 100,
  divisions: 10
}

export {
  createGridHelper
}

